<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="test"></div>

        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
		<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
		<!-- 生产环境中不建议使用 -->
		<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

        <script type="text/babel">
            class Demo extends React.Component{
                showData = () =>{
                    console.log('input1',this);
                    // 这里的refs 获取的是 ref
                    // 这里的ref都是字符串类型的  不推荐使用
                    // 因为 string 类型的 refs 存在 一些问题。它已过时并可能会在未来的版本被移除。
                    const {input1} = this;
                    alert(input1.value);
                }
                showData2 = () =>{
                    console.log(this);
                    const {input2} = this;
                    alert(input2.value);
                }
                render(){
                    return(
                        <div>
                            <div>
                                <input ref={(currentNode)=>{console.log(currentNode),this.input1 = currentNode}} type="text" placeholder="点击按钮提示数据"/>
                                <button onClick={this.showData}>点击展示左侧的数据</button>
                            </div>
                            <div>
                                <input ref={ c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                            </div>
                        </div>
                    )
                }
            }
            ReactDOM.render(<Demo a="a" b="b"/>,document.getElementById("test"));
        </script>
    </body>
</html>